<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模态框调试页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
        }
        .debug-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>模态框调试页面</h1>
        
        <div class="debug-info">
            <h5>调试信息</h5>
            <p id="debug-output">等待测试...</p>
        </div>
        
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#testModal">
            测试模态框
        </button>
        
        <button type="button" class="btn btn-success" id="programmaticModal">
            程序化打开模态框
        </button>
        
        <button type="button" class="btn btn-info" id="checkElements">
            检查页面元素
        </button>
    </div>

    <!-- 测试模态框 -->
    <div class="modal fade" id="testModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">测试模态框</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>这是一个测试模态框，用于验证Bootstrap模态框是否正常工作。</p>
                    <div class="mb-3">
                        <label for="testInput" class="form-label">测试输入</label>
                        <input type="text" class="form-control" id="testInput" placeholder="输入一些文字">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const debugOutput = document.getElementById('debug-output');
        
        function log(message) {
            console.log(message);
            debugOutput.innerHTML += message + '<br>';
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            log('页面加载完成');
            log('Bootstrap版本: ' + (window.bootstrap ? '已加载' : '未加载'));
            
            // 检查模态框元素
            const modalElement = document.getElementById('testModal');
            log('模态框元素: ' + (modalElement ? '存在' : '不存在'));
            
            // 程序化打开模态框
            document.getElementById('programmaticModal').addEventListener('click', function() {
                try {
                    const modalInstance = new bootstrap.Modal(document.getElementById('testModal'));
                    modalInstance.show();
                    log('程序化打开模态框成功');
                } catch (error) {
                    log('程序化打开模态框失败: ' + error.message);
                }
            });
            
            // 检查页面元素
            document.getElementById('checkElements').addEventListener('click', function() {
                log('=== 页面元素检查 ===');
                log('模态框数量: ' + document.querySelectorAll('.modal').length);
                log('模态框背景数量: ' + document.querySelectorAll('.modal-backdrop').length);
                
                const modalEl = document.getElementById('testModal');
                if (modalEl) {
                    const computedStyle = window.getComputedStyle(modalEl);
                    log('模态框z-index: ' + computedStyle.zIndex);
                    log('模态框display: ' + computedStyle.display);
                }
                
                // 检查是否有其他高z-index元素
                const allElements = document.querySelectorAll('*');
                let highZIndexElements = [];
                allElements.forEach(el => {
                    const zIndex = window.getComputedStyle(el).zIndex;
                    if (zIndex !== 'auto' && parseInt(zIndex) > 1000) {
                        highZIndexElements.push({
                            element: el.tagName + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.split(' ').join('.') : ''),
                            zIndex: zIndex
                        });
                    }
                });
                
                if (highZIndexElements.length > 0) {
                    log('高z-index元素:');
                    highZIndexElements.forEach(item => {
                        log('  ' + item.element + ': ' + item.zIndex);
                    });
                } else {
                    log('没有发现高z-index元素');
                }
            });
            
            // 监听模态框事件
            const testModal = document.getElementById('testModal');
            testModal.addEventListener('show.bs.modal', function() {
                log('模态框开始显示');
            });
            
            testModal.addEventListener('shown.bs.modal', function() {
                log('模态框显示完成');
            });
            
            testModal.addEventListener('hide.bs.modal', function() {
                log('模态框开始隐藏');
            });
            
            testModal.addEventListener('hidden.bs.modal', function() {
                log('模态框隐藏完成');
            });
        });
    </script>
</body>
</html>